<!--  -->
<template>
  <div>
    <el-input v-model="username" placeholder="请输入内容"></el-input>
    <el-input v-model="password" placeholder="请输入内容"></el-input>
    <el-button type="primary" @click="login" :loading="loading">主要按钮</el-button>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from '@vue/composition-api'
import router from '@/router';
import mixin from '@/utils/mixin'

let { $http, set } = mixin()

// 用户登录
function user() {

  let form = reactive({
    username: "admin",
    password: "admin",
  })
  let loading = ref(false)

  async function login() {
    loading.value = true
    const token = await $http.post('/login', form)
    set.token(token)

    const { user } = await $http.get('/sys/user/info')
    set.user(user)

    loading.value = false
    router.push("/");
  }

  return {
    ...toRefs(form),
    loading,
    login
  }
}

export default {
  setup() {
    return {
      ...user()
    }
  }
}
</script>

<style scoped>
</style>